<!--
 * @Author: maqaing
 * @Date: 2021-10-22 14:14:51
 * @LastEditors: mjj
 * @LastEditTime: 2021-10-25 16:13:46
 * @Description: 
-->
<template>

<div class="carusel">
<div class="buttons">
<el-form
        :inline="true"
        size="small"
        :model="queryParams"
        class="demo-form-inline"
      >
        <el-form-item style="margin-right: 10px">
          <el-button type="success" @click="toAddHandler">新增</el-button>
        </el-form-item>
        <el-form-item style="margin-right: 10px">
          <el-button type="success" @click="toAddHandler">预览</el-button>
        </el-form-item>
</el-form>
</div>

  <el-table
    :data="Carousels" style="width: 100%">
    <el-table-column type="index" label="序号">      
    </el-table-column>
    <el-table-column prop="name" label="轮播图名称"></el-table-column>
    <el-table-column prop="introduce" label="轮播图描述"></el-table-column>
<el-table-column label="轮播图图片">
        <template v-slot="scope">
          <el-popover placement="right" width="170" trigger="hover">
            <img :src="scope.row.url" width="150px" height="100px" />
            <img slot="reference" :src="scope.row.url" alt="" height="30" />
          </el-popover>
</template>
</el-table-column>

    <el-table-column prop="status" type='success' label="状态">
      <template v-slot="scope">
          <el-tag
            v-if="scope.row.status == '正常'"
            type="success"
            size="mini"
            >{{ scope.row.status }}</el-tag
          >
          <el-tag v-else type="danger" size="mini">{{
            scope.row.status
          }}</el-tag>
        </template>
    </el-table-column>
    <el-table-column label="操作" align='center'>
      <template >
          <el-button type="text" @click="toEditHandler(scope.row)" size="mini">编辑</el-button>
          <el-button size="mini" type="text" >删除</el-button>
          <el-button size="mini" type="text" >停用</el-button>
        </template>
    </el-table-column>
  </el-table>


  
  </div>
</template>

<script>
// import request from "@/utils/request";
import request from "@/utils/request"
export default {
  data() {
    return {

      Carousels:[],
    };
  },
  methods:{
      // 查询所有轮播图
      findAllCarousels(){
        request.get("/carousel/findAll").then((res)=>{
          this.Carousels=res.data;
          console.log(res);
        })
      }
  },
  created(){
    // 执行查询轮播图
    this.findAllCarousels();
  }
};
</script>